<template>
    <div class="my-share">
        <div class="template-header">
            <!-- <div class="title">我的项目（{{  shareList.length  }}个）</div> -->
            <div class="search">
                <el-input style="width: 600px;" clearable size="small" placeholder="请输入关键字查询" v-model.trim="name" @keyup.enter.native="getShareList">
                    <el-button slot="append" icon="el-icon-search" @click="getShareList"></el-button>
                </el-input>
            </div>
        </div>
        <div class="project-content" v-if="shareList.length">
            <div class="single-peoject" v-for="(item, index) in shareList" :key="index" @mouseover="showButton(item)" @mouseleave="hideButton(item)">
                <div class="thumb">
                    <img :src="getImg(item.preview)" alt="item.name" />
                </div>
                <div class="deacribe">
                    <div class="name">{{  item.name  }}</div>
                    <div class="time">{{  item.expiretime  }}</div>
                </div>
                <div class="handle" :id="'btn' + item.id">
                    <div class="edit-btn" v-if="item.state == '2'" @click.stop="startShare(item)">启用</div>
                    <div class="edit-btn" v-if="item.state == '1'" @click.stop="stopShare(item)">禁用</div>
                    <div class="handle-btns">
                        <img src="../../image/main/template_preview.svg" @click.stop="previewShare(item)" title="查看" />
                        <img src="../../image/main/template_edit.svg" @click.stop="modifyShare(item)" title="编辑" />
                        <img src="../../image/main/template_delete.svg" @click.stop="deleteShare(item)" title="删除" />
                    </div>
                </div>
            </div>
            <!-- 勿删！！！，弹性布局占位 -->
            <div class="single-peoject-last" v-for="item in 20" :key="item + 5000"></div>
        </div>
        <el-empty v-else description="暂无分享数据"></el-empty>
        <el-dialog title="修改分享" :visible.sync="modifyVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="ruleShare" :rules="ruleShareRules" ref="ruleShareForm" label-width="100px" label-position="top">
                <el-form-item label="分享名称" prop="name">
                    <el-input v-model="ruleShare.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="分享过期时间" prop="expiretime">
                    <el-date-picker placeholder="请选择" v-model="ruleShare.expiretime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyVisible = false">取&nbsp;消</el-button>
                <el-button type="primary" @click="updateShare">确&nbsp;定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/js/util/url.js';
import message from '@/js/util/message.js';
import user from '@/js/util/user.js';
import config from '@/js/util/config.js';
import icon_default from '@/image/scene/icon_default.svg';
import PATH from '@/js/util/path.js';

export default {
    name: 'myShare',
    data() {
        return {
            name: '',
            shareList: [],
            modifyVisible: false,
            ruleShare: {
                name: '',
                expiretime: '',
                id: '',
                state: ''
            },
            ruleShareRules: {
                name: [
                    {
                        required: true,
                        message: '请输入分享名称',
                        trigger: 'blur'
                    }
                ],
                expiretime: [
                    {
                        required: true,
                        message: '请选择分享过期时间',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    created() {
        this.getShareList();
    },
    methods: {
        showButton(item) {
            document.getElementById(`btn${item.id}`).style.display = 'block';
        },
        hideButton(item) {
            document.getElementById(`btn${item.id}`).style.display = 'none';
        },
        getShareList() {
            let param = {
                name: this.name,
                token: user.getToken()
            };
            let result = request.getShareList(param);
            this.shareList = [];
            if (result.state.code == 10000 && result.body.message.list) {
                this.shareList = result.body.message.list;
            }
        },
        previewShare(row) {
            let router = this.$router.resolve({ path: PATH.VIEWER, query: { id: row.key } });
            window.open(router.href);
        },
        modifyShare(row) {
            this.ruleShare.name = row.name;
            this.ruleShare.expiretime = row.expiretime;
            this.ruleShare.id = row.id;
            this.ruleShare.state = row.state;
            this.modifyVisible = true;
        },
        deleteShare(row) {
            let _this = this;
            message.confirm(
                '是否删除',
                '',
                function() {
                    let param = {
                        id: row.id,
                        token: user.getToken()
                    };
                    let result = request.deleteShare(param);
                    if (result.body.message === '1') {
                        message.message('删除成功！', 'success');
                        _this.getShareList();
                    } else if (result.body.message === '0') {
                        message.message('删除失败', 'error');
                    } else {
                        message.message(result.body.message, 'error');
                    }
                },
                function() {
                    message.message('已取消删除！', 'info');
                }
            );
        },
        getImg(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : icon_default;
        },
        updateShare() {
            let param = {
                id: this.ruleShare.id,
                name: this.ruleShare.name,
                expiretime: this.ruleShare.expiretime,
                state: this.ruleShare.state,
                token: user.getToken()
            };
            let result = request.updateShare(param);
            if (result.state.code == 10000) {
                message.message('修改成功！', 'success');
                this.modifyVisible = false;
                this.getShareList();
            } else {
                message.message(result.body.message, 'error');
            }
        },
        startShare(row) {
            let _this = this;
            message.confirm(
                '是否启动',
                '',
                function() {
                    let param = {
                        id: row.id,
                        token: user.getToken()
                    };
                    let result = request.enableShare(param);
                    if (result.body.message === '1') {
                        message.message('启动成功！', 'success');
                        _this.getShareList();
                    } else if (result.body.message === '0') {
                        message.message('启动失败', 'error');
                    } else {
                        message.message(result.body.message, 'error');
                    }
                },
                function() {
                    message.message('已取消启动！', 'info');
                }
            );
        },
        stopShare(row) {
            let _this = this;
            message.confirm(
                '是否禁用',
                '',
                function() {
                    let param = {
                        id: row.id,
                        token: user.getToken()
                    };
                    let result = request.disableShare(param);
                    if (result.body.message === '1') {
                        message.message('禁用成功！', 'success');
                        _this.getShareList();
                    } else if (result.body.message === '0') {
                        message.message('禁用失败', 'error');
                    } else {
                        message.message(result.body.message, 'error');
                    }
                },
                function() {
                    message.message('已取消禁用！', 'info');
                }
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.my-share {
    height: 100%;
    overflow: hidden;

    .project-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-y: auto;
        height: calc(100% - 100px);
    }
}
</style>